<template>
  <div class="register">
      <div class="headline">
          <h2>注册</h2>
      </div>
      <div class="logo"> 
          <!-- <img src="../../assets/LOGO@3x.png" alt=""> -->
      </div>
       <div class="account">
          <input class="mint-field-core" maxlength="11" placeholder="请输入手机号" type="tel" v-model="form.tel">
          <div class="input-code">
               <input class="mint-field-core"  placeholder="验证码" type="text" v-model="form.code">
               <mt-button @click="getCode" class="main-bgc" type="default">{{hint}}</mt-button>
           </div>
          <div class="password-input">
              <input maxlength="15" class="last-input mint-field-core" placeholder="密码" type="password" v-model="form.password">
          </div>
           <input @blur="notarize" maxlength="15" class="last-input mint-field-core" placeholder="确认密码" type="password" v-model="notarizePassword">
          <mt-button @click="submit" :class="btnBgc" type="default">下一步</mt-button>
          <router-link class="register-btn" to="/login">
            <span class="mian-color">已有一生教育账号?去登陆</span>
          </router-link>
      </div>
      <!-- <div class="agreement">点击注册代表您已阅读并同意《一生教育协议》</div> -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            notarizePassword: '', //用于临时存储密码
            //表单数据
            form: {
                tel: '',
                password: '',
                code: '',
                channel:'4'
            },
            // 控制可见不可见
            imageShow: true,
            imageHide: false,
            i: 0,
            flag: false, //阻止下一步
            btnBgc: '',
            hint: '获取验证码'
        }
    },
    updated() {
        if (
            this.form.tel &&
            this.form.tel &&
            this.form.password == this.notarizePassword &&
            this.form.code
        ) {
            this.btnBgc = 'main-bgc'
            this.flag = true
        } else {
            this.btnBgc = ''
        }
    },
    methods: {
        notarize() {
            if (this.form.password != this.notarizePassword) {
                alert('您输入的密码不一致')
            }
        },
        // 获取注册验证码
        getCode() {
            let flag = false
            if (flag) return false
            let i = 60
            let type = {
                type: 0,
                tel: this.form.tel
            }
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return alert('请输入正确的手机号')
            }
            // 判断手机号是否被注册
            let countDown
            this.utils.$get(
                this.utils.GET_USERTEL,
                data => {
                    // 发送验证码
                    this.utils.$post(
                        this.utils.GET_USERSMS,
                        data => {
                            countDown = setInterval(() => {
                                this.disableds = true
                                i--
                                this.hint = i + 's'
                                if (i <= 0) {
                                    this.disableds = false
                                    this.hint = '获取验证码'
                                    clearInterval(countDown)
                                }
                            }, 1000)
                            this.flag = true
                        },
                        type
                    )
                },
                type
            )
        },
        submit() {
            if (!this.flag) return alert('请先将信息填写完整')
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return alert('请输入正确的手机号')
            }
            if(!/^[0-9]*$/.test(this.form.code)){
                return alert('请填写正确的验证码')
            }
            if(!/^[a-zA-Z0-9]{6,15}$/.test(this.form.password)){
                return alert('请填写正确的密码')
            }
            if (this.form.password != this.notarizePassword) {
                return alert('您两次输入的密码不一致')
                
            }
            this.utils.$post(this.utils.SET_ADDUSER, data => {
                this.$router.push({ path: '/complete' });
            }, this.form)
        }
    }
}
</script>


<style lang="less">
@mainColor: #00d8c9;
.register {
    .login-btn {
        width: 100%;
        padding: 0.2rem 0 0.6rem;
        text-align: center;
        font-size: 0.3rem;
    }
    .logo {
        width: 100%;
        padding: 0 0 1.2rem;
        > img {
            display: block;
            width: 1.5rem;
            height: 1.6rem;
            margin: 0 auto;
        }
    }
    .account {
        padding: 0 0.6rem;
        .mint-field-core {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #e5e5e5;
            color: #333;
            font-size: 0.28rem;
            padding-bottom: 0.16rem;
            &:focus {
                border-bottom: 1px solid @mainColor;
            }
        }
        .input-code {
            margin: 0.8rem 0 0;
            position: relative;
            height: 0.6rem;
            .main-bgc {
                position: absolute;
                background-color: @mainColor;
                color: #fff;
                font-size: 0.24rem;
                border-radius: 50px;
                width: 2.0rem;
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                bottom: 0.15rem;
                right: 0;
            }
        }
        .last-input {
            margin: 0.8rem 0 0.2rem;
            > input {
                width: 100%;
                height: 100%;
                opacity: 0;
                outline: none;
                border: none;
            }
        }
        .forget-btn {
            > a {
                color: #999;
                font-size: 0.24rem;
            }
        }
        .mint-button--normal {
            color: #fff;
            background-color: #ddd;
            width: 100%;
            margin-top: 1rem;
            height: 0.8rem;
            border-radius: 50px;
        }
        .main-bgc {
            background-color: @mainColor;
        }
        .register-btn {
            display: block;
            width: 100%;
            margin-top: 0.4rem;
            > span {
                display: block;
                text-align: center;
                font-size: 0.24rem;
                color: #999;
            }
        }
        .password-input {
            position: relative;
            > img {
                position: absolute;
                width: 0.44rem;
                height: 0.44rem;
                right: 0.1rem;
                bottom: 16px;
            }
        }
    }
    .agreement {
        margin: 1.9rem 0 1rem;
        text-align: center;
        font-size: 0.24rem;
        color: @mainColor;
    }
}
</style>
